<template>
  <div>
    <div>
      <!-- <div style="margin: 2% 0; display: inline-block">
        <span>名称：</span>
        <el-input
          style="width: 150px"
          @keydown.enter.native="select"
          clearable
          placeholder="请输入名称"
          v-model="name"
        ></el-input>
      </div> -->
      <div style="margin: 2% 0; display: inline-block">
        <el-button type="primary" @click="onCreate">添加</el-button>
      </div>
    </div>
    <el-table
      v-loading="tableDataLoading"
      :data="tableData.content"
      row-key="id"
    >
      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          {{ scope.row.type == 2 ? "实物盲盒" : "虚拟盲盒" }}
        </template>
      </el-table-column>
      <el-table-column prop="img" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column prop="money" label="购买价格"></el-table-column>
      <el-table-column prop="chance" label="几率"></el-table-column>
      <el-table-column label="操作" width="160px" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            style="margin-bottom: 5px"
            size="mini"
            type="primary"
            @click="onEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            style="margin-bottom: 5px"
            size="mini"
            type="danger"
            @click="onDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        :current-page="page"
        layout="total,sizes, prev, pager, next"
        :total="tableData.totalElements"
      >
      </el-pagination>
    </div>
    <!-- 修改盲盒/新增 -->
    <el-dialog
      :title="`${dialogStatus === 'edit' ? '修改' : '新增'}盲盒`"
      :visible.sync="dialogFormVisible1"
      center
    >
      <el-form :model="form">
        <el-form-item label="类型：" :label-width="formLabelWidth">
          <div v-if="dialogStatus === 'edit'">
            {{ form.type == 2 ? "实物盲盒" : "虚拟盲盒" }}
          </div>
          <div v-else>
            <el-radio-group v-model="form.type" @change="onTypeChange">
              <el-radio-button label="2">实物盲盒</el-radio-button>
              <el-radio-button label="1">虚拟盲盒</el-radio-button>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="图片地址：" :label-width="formLabelWidth">
          <div
            style="
              width: 148px;
              height: 148px;
              border: 1px dashed #c0ccda;
              border-radius: 6px;
              text-align: center;
              line-height: 148px;
            "
          >
            <el-upload
              class="avatar-uploader"
              v-model="imgUrl"
              action="https://admin.koudaidj.com/game/alioss/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
            >
              <img
                v-if="form.img"
                :src="form.img"
                class="avatar"
                style="border-radius: 6px; width: 148px; height: 148px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="价格：" :label-width="formLabelWidth">
          <el-input v-model="form.money" style="width: 65%"></el-input>
        </el-form-item>
        <el-form-item label="几率：" :label-width="formLabelWidth">
          <el-input v-model="form.chance" style="width: 65%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="amendadvertTo()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 5,
      page: 1,
      name: null,
      imgUrl: "",
      tableDataLoading: false,
      dialogFormVisible1: false,
      dialogStatus: "edit",
      formLabelWidth: "200px",
      form: {
        id: "",
        img: "",
        money: "",
        sort: "",
        createTime: "",
        type: "",
        chance: "",
      },
      tableData: {
        content: [],
      },
    };
  },
  methods: {
    onTypeChange() {
      console.log(this.form.type);
    },
    onCreate(index, rows) {
      this.dialogFormVisible1 = true;
      let id, img, money, sort, createTime, type, chance;
      this.form = { id, img, money, sort, createTime, type, chance };
      this.dialogStatus = "create";
    },
    // 修改
    onEdit(index, rows) {
      this.dialogFormVisible1 = true;
      this.form.id = rows.id;
      this.form.img = rows.img;
      this.form.money = rows.money;
      this.form.sort = rows.sort;
      this.form.createTime = rows.createTime;
      this.form.type = rows.type;
      this.form.chance = rows.chance;
      this.dialogStatus = "edit";
    },
    onDelete(index, {id}) {
      this.$confirm("确认删除？").then(() => {
        this.$http({
          url: this.$http.adornUrl2('/draw/deleteLuck'),
          method: "get",
          params: this.$http.adornParams({id}),
        }).then(({ data }) => {
          this.$message({
            message: "操作成功",
            type: "success",
            duration: 1500,
            onClose: () => {
              this.dataSelect();
            },
          });
        });
      });
    },
    // 修改盲盒/新增
    amendadvertTo() {
      if (this.form.money == "") {
        this.$notify({
          title: "提示",
          duration: 1800,
          message: "请输入价格",
          type: "warning",
        });
        return;
      }
      let url = "";
      if (this.dialogStatus === "edit") {
        url = this.$http.adornUrl2("/draw/updateBox");
      } else {
        url = this.$http.adornUrl2("/draw/saveLuck");
      }
      this.$http({
        url,
        method: "post",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: this.$http.adornData(
          {
            id: this.form.id,
            img: this.form.img,
            money: this.form.money,
            sort: this.form.sort,
            createTime: this.form.createTime,
            type: this.form.type,
            chance: this.form.chance,
          },
          false,
          "form"
        ),
      }).then(({ data }) => {
        this.dialogFormVisible1 = false;
        this.$message({
          message: "操作成功",
          type: "success",
          duration: 1500,
          onClose: () => {
            this.dataSelect();
          },
        });
      });
    },
    handleAvatarSuccess1(file) {
      this.form.img = file.data;
    },
    // select自动选择
    selectTrigger() {
      this.dataSelect();
    },
    // 查询
    select() {
      this.page = 1;
      this.size = 5;
      this.dataSelect();
    },
    handleSizeChange(val) {
      this.size = val;
      this.dataSelect();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataSelect();
    },
    toDetail(row) {
      this.$router.push({ path: "/whereasDetail", query: { id: row.id } });
    },
    // 获取数据
    dataSelect() {
      let page = this.page - 1;
      this.tableDataLoading = true;
      this.$http({
        url: this.$http.adornUrl2("/draw/findBox"),
        method: "get",
        params: this.$http.adornParams({
          page: page,
          size: this.size,
          name: this.name,
          // 'userId':this.userId,
          // 'area':this.area,
        }),
      }).then(({ data }) => {
        this.tableDataLoading = false;
        // console.log(data)
        this.tableData = data.data || { content: [] };
      });
    },
  },
  mounted() {
    this.dataSelect();
  },
};
</script>

<style>
</style>
